<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
    <script>
    window.onload=function(){
        /* 
            拖拽box1元素
            -拖拽的流程
            1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
            2.当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
            3.当鼠标松开时，被拖拽元素固定在当前位置onmouseup
        */
       //1.获取box1
       var box1=document.getElementById("box1");
       var box2=document.getElementById("box2");
       var img1=document.getElementById("img1");
       //开启box1的拖拽
       //开启box1的拖拽
       drag(box1);
       drag(box2);
       drag(img1);

       //2.为box1绑定一个鼠标按下事件
       //当鼠标在被拖拽元素上按下时，开始拖拽
    
    }


    /* 
        提取一个专门用来拖拽的函数
        参数：开启拖拽的元素

    */
   function drag(obj){

    obj.onmousedown=function(event){

//10设置box1捕获所有鼠标按下的事件
/* 
    setCapture()
    -只有IE支持，但是在火狐里调用不会报错

    而如果在chrome中调用，会报错
*/
obj.setCapture&&obj.setCapture();
event=event||window.event;
//9.div的偏移量 鼠标.clentX-元素.offsetLeft
//div的偏移量  鼠标.clentY-元素.offsetTop
var ol=event.clientX-obj.offsetLeft;
var ot=event.clientY-obj.offsetTop;

//3.为document绑定一个onmousemove事件
document.onmousemove=function(event){
event=event||window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//4.获取鼠标的坐标
    var left=event.clientX-ol
    var top=event.clientY-ot;
//5.修改box1的位置
obj.style.left=left+"px";
obj.style.top=top+"px";
//6.为document绑定一个鼠标松开事件
document.onmouseup=function(){
//当鼠标松开时，被拖拽元素固定在当前位置onmouseup
//7.取消document的onmousemove事件
document.onmousemove=null;
//8.取消document的onmouseup事件
document.onmouseup=null;

obj.releaseCapture&& obj.releaseCapture();
//  
};



/* 
当我们拖拽一个网页中的内容，浏览器会默认去搜索引擎中搜索内容
此时会导致拖拽功能的异常，这个时浏览器提供的默认行为
如果不希望发生这个行为，则可以通过return false来取消默认行为
但是对IE8不起作用
*/
return false;


};

}

   }
    </script>
</head>
<body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
    <img src="../mi/img/ad1.jpg" id="img1" style="position:absolute">
</body>
</html>